<template lang="">
		<view class="home">
			<view class="crowdText">
				<scroll-view  style="height: 300rpx;" scroll-y="true" @click="this.selectModalShow = false" >
					<textarea placeholder="请输入内容" style="margin: 10rpx 0;width: 100%;height: 300rpx;" @input="inputBlur" :value="formObj.content"  :maxlength="600" />
				</scroll-view>
				<view style="text-align: right;margin-top: 5rpx;color: #A3A3A3;">
					{{formObj.content.length}}/600
				</view>
			</view>
			<view class="addAccessory" @click="this.selectModalShow = !this.selectModalShow" >
				添加附件
				
			</view>
			
			<view class="selectModal" v-if="selectModalShow">
				<view class="item" v-for="(item,index) in selectArr" @click="goSelectItem(item,index)" :key="item.name">{{item.name}}</view>
			</view>
			
			<uni-popup ref="popup" type="bottom">
				<view class="popupContent">
					<view class="popupTitle">
						<text>
							添加{{selectType}}附件
						</text>
						<u-icon class="icon" name="close" color="#999999" @click="closePopup" size="28"></u-icon>
					</view>
					<scroll-view scroll-y class="popupForm">
						<view v-show="selectIndex==0"  class="">
							<u-form :model="pictureForm" ref="uForm"  label-position="top">
										<!-- <u-form-item :border-bottom="false" class="form-item" label="图片标签：" prop="title">
												<u-input v-model="pictureForm.title" border placeholder="请输入图片标题"/>
										</u-form-item> -->
										<u-form-item  :border-bottom="false" class="form-item" label="图片：" prop="name">
												<uploadImg ref="selectIndex1Img" @sucColse="sucColse"></uploadImg>
										</u-form-item>
							</u-form>
						</view>
						<view v-show="selectIndex==1"  class="">
							<u-form :model="urlForm" ref="uForm"  label-position="top">
										<u-form-item :border-bottom="false" class="form-item" label="链接地址：" prop="url">
												<u-input v-model="urlForm.link_url" border placeholder="链接地址请以http或https开头"/>
										</u-form-item>
										<view class="form-item" v-if="false">
											<view @click="selectRadar(1)" class="radarBtn">
												选择互动雷达
											</view>
										</view>
										<view class="form-item" style="margin-top: 10rpx;">
											<view class="label">
												<text>高级设置: </text>
												<u-switch style="margin: 0 15rpx;" v-model="urlForm.advancedChecked"></u-switch>
												<text>{{urlForm.advancedChecked ? '已':'未'}}开启</text>
											</view>
										</view>
										<view v-if="urlForm.advancedChecked" class="">
											<u-form-item :border-bottom="false" class="form-item" label="链接标题：" prop="title">
													<u-input class="" v-model="urlForm.link_title" border placeholder="请输入链接标题"/>
											</u-form-item>
											<u-form-item :border-bottom="false" class="form-item" label="链接描述：" prop="title">
													<u-input class="" v-model="urlForm.link_desc" border placeholder="请输入链接描述"/>
											</u-form-item>
											<u-form-item  :border-bottom="false" class="form-item" label="链接封面：" prop="name">
													<uploadImg ref="selectIndex2Img" @sucColse="sucColse"></uploadImg>
											</u-form-item>
										</view>
										
										<view class="form-item" style="margin-top: 10rpx;" v-if="false">
											<view class="label">
												<text >链接追踪设置: </text>
												<u-switch style="margin: 0 15rpx;" v-model="urlForm.urlTrackChecked"></u-switch>
												<text>{{urlForm.urlTrackChecked ? '已':'未'}}开启</text>
											</view>
										</view>
										<view v-if="urlForm.urlTrackChecked" class="">
											<view >
												<checkbox-group class="urlTrackBox" @change="urlTrackCheckedChange">
												    <label class="urlTrackCheckedItem" v-for="item in urlTrackCheckedArr" :key="item.value">
												        <view class="urlTrackCheckedLabel" style="display: flex;">
												            <checkbox :value="item.value" :checked="item.checked" />
															<view class="label">{{item.label}}</view>
												        </view>
												        <view class="urlTrackCheckedDesc">{{item.content}}</view>
												    </label>
													<view v-if="urlTrackCheckedArr[3].checked" class="boxTips">
														<view class="item">
															<view class="label">
																规则1：
															</view>
															<view class="label">
																用户
																<view class="" style="width: 250rpx;margin: 0 20rpx;border: 1px solid #dcdfe6;border-radius: 4rpx;">
																	<u-dropdown style="">
																		<u-dropdown-item  v-model="urlForm.optionVal" :title="urlForm.optionTitle"  :options="urlFormOptions" @change="urlFormOptionsChange">
																		</u-dropdown-item>
																	</u-dropdown>
																</view>
																时
															</view>
															<view class="label" style="display: flex;align-items: center;">
																可评	
																<view  style="width: 200rpx;">
																	<u-input v-model="urlForm.score" border placeholder="请输入评分"/>
																</view> 
																分
															</view>
															<view class="label" style="display: flex;align-items: center;">
																<text>并打上标签：</text>
																<u-switch style="margin: 0 15rpx;" v-model="urlForm.labelChecked"></u-switch>
															</view>
														</view>
														<view class="item" style="border-top: 1px dashed #B5B9BA;display: flex;width: 100%;align-items: center;padding-top: 15rpx;margin-left: 0;">
															<view class=""style="color: #519BFE;display: flex;align-items: center;margin-left: 30rpx;font-weight: 600;">
																<image src="../../static/img/addAttachmentIcon.png" style="width: 40rpx;height: 40rpx;margin-right: 10rpx;" mode=""></image>
																添加规则
															</view>
															<text style="color: #B5B9BA;margin-left: 20rpx;">(添加的多条规则，可同时生效)</text>
														</view>
													</view>
												</checkbox-group>
											</view>
										</view>
							</u-form>
						</view>
						<view v-show="selectIndex==2"  class="">
							<view class="miniProgramTips">
								<image src="../../static/img/trumpetIcon.png" mode="aspectFit"></image>
								<text>请填写企业微信后台绑定的小程序id和路径，否则会造成发送失败</text>
							</view>
							<u-form :model="miniProgramForm" ref="miniProgramForm" class="miniProgramForm" label-position="top">
										<u-form-item :border-bottom="false" class="" label="小程序标题：" prop="title">
											<view class="form-item">
												<!-- <view class="label">
													小程序标题：
												</view> -->
												<view class="input">
													<u-input v-model="miniProgramForm.miniprogram_title" border placeholder="请输入小程序标题"/>
												</view>
											</view>
										</u-form-item>
										<u-form-item :border-bottom="false" class="" label="小程序appID：" prop="appID">
											<view class="form-item">
												<!-- <view class="label">
													小程序appID：<text>如何获取小程序appID?</text>
												</view> -->
												<view class="input">
													<u-input v-model="pictureForm.miniprogram_appid" border placeholder="请输入小程序appID"/>
												</view>
											</view>
										</u-form-item>
										<u-form-item :border-bottom="false" class="" label="小程序路径：" prop="url">
											<view class="form-item">
											<!-- 	<view class="label">
													小程序路径：<text>如何获取小程序路径?</text>
												</view> -->
												<view class="input">
													<u-input v-model="pictureForm.miniprogram_page" border placeholder="请输入小程序路径"/>
												</view>
											</view>
										</u-form-item>
										<u-form-item  :border-bottom="false" class="" label="小程序封面：" prop="cover">
											<view class="form-item">
												<!-- <view class="label">
													小程序封面：
												</view> -->
												<view class="input">
													<uploadImg ref="selectIndex3Img" @sucColse="sucColse"></uploadImg>
													<view class="uploadImgTip">建议图片大小在2M以内，建议尺寸：520*416</view>
												</view>
											</view>
										</u-form-item>
							</u-form>
						</view>
						<view v-show="selectIndex==3 || selectIndex==4 "  class="">
							正在开发
						</view>
						
					</scroll-view>
					<view class="btns">
						<view class="cancle" @click="closePopup()">
							取消
						</view>
						<view class="submit" @click="submit()">
							确定
						</view>
					</view>
				</view>
			</uni-popup>
			
			
			<!-- 互动雷达 -->
			<u-modal v-model="modelShow"  style="width: 300rpx;" :show-title="false" :title-style="{color: 'black'}" :mask-close-able="false" :show-cancel-button="false" :show-confirm-button="false" >
				<view class="slot-content radarFormContent">
					<view class="" style="display: grid;place-items: center;width: 100%;font-size: 36rpx;margin-top: 20rpx;position: relative;font-weight: 600;">
						选择互动雷达
						<u-icon @click="selectRadar(2)" style="position: absolute;right: 5%;display: grid;place-items: center;" name="close" color="#9E9E9E" size="28"></u-icon>
					</view>
					<view class="serch">
						<u-input class=""  v-model="formObj.radarKeyWords" border placeholder="搜索雷达名称"/>
					</view>
					<view class="radarTypeArr">
						<text v-for="(item,index) in radarTypeArr" :key="index">{{item}}</text>
					</view>
					<view class="content">
						<view class="noMore">
							<image src="/static/img/empty.png" mode="aspectFit"></image>
							<text>未找到相关雷达信息</text>
						</view>
					</view>
					<view class="btns">
						<view class="cancle" @click="selectRadar(2)">
							取消
						</view>
						<view class="confirm">
							确认
						</view>
					</view>
				</view>
			</u-modal>
		</view>
     
</template>
<script>
import uploadImg from '../uploadImg/uploadImg.vue'
export default {
    data() {
    	return {
			selectModalShow:false,
			modelShow:false,
			formObj:{
				content:''
			},
			urlForm:{
				link_url:'',
				link_title:'',
				link_desc:'',
				link_picurl:'',
				advancedChecked:false,
				urlTrackChecked:false,
				radarKeyWords:'',
				score:'1',
				labelChecked:false,
				optionTitle: '每打开一次',
				optionVal : 0,
			},
			miniProgramForm:{
				miniprogram_title:'',//标题
				miniprogram_appid:'',//id
				miniprogram_page:'',//小程序路径
				miniprogram_pic_media_id:'',//小程序封面
			},
			selectArr:[
				{
					name:'图片'
				},
				{
					name:'链接'
				},
				{
					name:'小程序'
				},
				// {
				// 	name:'自定义表单'
				// },
				// {
				// 	name:'抽奖活动'
				// },
			],
			selectIndex:-1,
			selectType:'',
			pictureForm:{
				// title:'',
				image_pic_url:''
			},
			urlTrackCheckedArr: [
				{
					value: '1',
					label: '行为通知',
					checked: false,
					content:'当客户点击雷达链接时，发送雷达链接的员工将会受到消息提醒'
				},
				{
					value: '2',
					label: '动态通知',
					checked: false,
					content:'当客户点击雷达链接时，会将客户的打卡行为、阅读时长和阅读完成率记录再客户动态里'
				},
				{
					value: '3',
					label: '客户标签',
					checked: false,
					content:'给点击雷达链接的客户打上选中的标签'
				},
				{
					value: '4',
					label: '设置客户评分',
					checked: true,
					content:'什么是客户评分？'
				},
			],
			radarTypeArr:[
				'全部',
				'雷达链接',
				'雷达PDF',
				'雷达文章'
			],
			urlFormOptions: [
				{
					label: '每打开一次',
					value: 0,
				},
				{
					label: '累计打开次数',
					value: 1,
				},
			],
		};
    },
    props:{
    	// showListData : Array,
    },
	computed:{
		selectTitle(){
			let str = ''
			if(this.selectType > 0){
				str =  this.selectArr[this.SelectIndex].name 
			}
			return str
		},
		
	},
	methods:{
		urlFormOptionsChange(_index){
			console.log(_index);
			this.urlForm.optionTitle = this.urlFormOptions[_index].label 
			this.urlForm.optionVal = this.urlFormOptions[_index].value 
		},
		selectRadar(_params){
			if(_params===1){
				this.$refs.popup.close()
				this.modelShow = true
			}else if(_params===2){
				this.$refs.popup.open()
				this.modelShow = false
			}
			
		},
		urlTrackCheckedChange(e){
			console.log(e);
		},
		closePopup(){
			this.$refs.popup.close()
		},
		async submit(){
			// console.log(this.$refs.uUpload.lists);
			if(this.selectIndex==0){
				// 图片
				await this.$refs.selectIndex1Img.uploadImg()
			}else if (this.selectIndex==1){
				// 链接
				if(this.urlForm.advancedChecked){
					await this.$refs.selectIndex2Img.uploadImg()
				}else{
					this.$refs.popup.close()
				}
			}else if (this.selectIndex==2){
				// 小程序
				await this.$refs.selectIndex2Img.uploadImg()
			}
		},
		goSelectItem(_item,_index){
			this.selectType = _item.name
			this.selectIndex = _index
			this.$refs.popup.open('bottom')
		},
		// uploadFile(){
		// 	this.selectModalShow = !this.selectModalShow
			
		// },
		sucColse(){
			if(this.selectIndex==0){
				this.pictureForm.image_pic_url  = this.$refs.selectIndex1Img.resImgUrl
				console.log(this.pictureForm.image_pic_url);
			}else if(this.selectIndex==1){
				this.urlForm.link_picurl =  this.$refs.selectIndex2Img.resImgUrl
				console.log(this.urlForm.link_picurl);
			}else if(this.selectIndex==2){
				this.miniProgramForm.miniprogram_pic_media_id =  this.$refs.selectIndex2Img.resImgUrl
				console.log(this.miniProgramForm.miniprogram_pic_media_id);
			}
			this.$refs.popup.close()
		},
		inputBlur(val){
			this.formObj.content = val.detail.value
		},
	},
	mounted() {
	},
	components:{
		uploadImg,
	}
}
</script>
<style lang="scss" scoped>
	/deep/ .u-dropdown__content{
		height: 200rpx !important;
		width: 300rpx;
		box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
	}
	/deep/ .u-cell_title{
		white-space: nowrap;
	}
	
	/deep/ .u-switch{
		background-color: #C0C0C0 !important;
	}
	/deep/ .u-switch--on{
		background-color: #1989fa !important;
	}
	/deep/ .uni-checkbox-input-checked{
		color: #fff !important;
		background-color: #438EF7 !important;
	}
	/deep/ .u-mode-center-box{
		width: 660rpx !important;
	}
	/* #ifdef MP-WEIXIN */
	/deep/ .u-form-item--left{
		display: none !important;
	}
	/deep/ .u-form-item--left__content__label{
		display: none !important;
	}
	/deep/ .u-form-item--left__content{
		display: none !important;
	}
	/* #endif */
	
	
    .home{
		width: 100%;
		position: relative;
		.content{
			padding:20rpx 20rpx 0;
			height: 370rpx;
			border-bottom: 2rpx solid #EEEEEE;
		}
		.selectModal{
			position: absolute;
			z-index: 99;
			bottom: 15%;
			left: 3%;
			box-shadow: 1px 1px 3px rgba(0,0,0,.1),0px 1px 3px rgba(0,0,0,.1) inset;
			height: 510rpx;
			width: 245rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			justify-content: space-evenly;
			.item{
				width: 100%;
				flex: 1;
				padding-left: 50rpx;
				display: flex;
				align-items: center;
			}
		}
		.addAccessory{
			margin: 18rpx 60rpx;
			color: #2772FE;
			position: relative;
			
		}
		.addAccessory::before{
			content: '+';
			position: absolute;
			top: 5%;
			left: -7%;
			width: 30rpx;
			height: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 2rpx solid #2772FE;
			border-radius: 50%;
		}
	
		.popupContent{
			height: 850rpx;
			background-color: #fff;
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
			// margin: 0 20rpx;
			.popupForm{
				height: 600rpx;
				width: 95%;
				margin: 0 auto;
				
				.radarBtn{
					width: 210rpx;
					height: 60rpx;
					background-color: #438EF7;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-weight: 200;
					color: #fff;
				}
				.label{
					display: flex;
					align-items: center;
				}
				.form-item{
				
				}
				.urlTrackBox{
					background-color: #FAFAFA;
					// height: 715rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					.urlTrackCheckedItem{
						margin: 20rpx 30rpx;
						.urlTrackCheckedLabel{
							display: flex;
							align-items: center;
							.label{
								color: #252525;
								font-size: 30rpx;
								font-weight: 600;
							}
						}
						&:nth-child(4) .urlTrackCheckedDesc{
							color: #4D94F7;
						}
						.urlTrackCheckedDesc{
							margin: 20rpx 50rpx;
							color: #8A8A8A;
							
						}
					}
					.boxTips{
						width: 100%;
						margin: 0rpx auto 30rpx;
						.item{
							margin-left: 40rpx;
							.label{
								margin-bottom: 30rpx;
								&:nth-child(1){
									color: #61676A;
									margin-left: 50rpx;
									position: relative;
									display: flex;
									align-items: center;
									font-weight: 600;
									&::before{
										content: '';
										position: absolute;
										display: grid;
										place-items: center;
										left: -10%;
										top: -8%;
										font-size: 36rpx;
										width: 40rpx;
										height: 40rpx;
										border-radius: 50%;
										background-color: #fff;
										color: #9D9D9D;
										font-weight: 600;
										border: 2px solid #9D9D9D;
										transform: scale(0.8);
									}
									&:after{
										content: '';
										position: absolute;
										left: -7.5%;
										top: 45%;
										// font-size: 36rpx;
										width: 20rpx;
										height: 4rpx;
										// border-radius: 50%;
										background-color: #9D9D9D;
										// color: #9D9D9D;
										font-weight: 600;
										// border: 2px solid #9D9D9D;
										// transform: scale(0.8);
									}
								}
							}
						}
					}
				}
			
			
				.miniProgramTips{
					
					color: #565A5B;
					width: 684rpx;
					height: 112rpx;
					background-color: #F1FAFE;
					margin: 10rpx auto 0;
					display: flex;
					align-items: center;
					padding: 20rpx;
					position: relative;
					image{
						position: absolute;
						top: 22%;
						left: 4%;
						width: 22rpx;
						height: 26rpx;
					}
					text{
						text-indent:1.2em;
					}
					
				}
			
				.miniProgramForm{
					.form-item{
						display: flex;
						flex-direction: column;
						.label{
							width: 100%;
							display: flex;
							font-size: 28rpx;
							&:before{
								content: '*';
								color: #EA4237;
								font-size: 21rpx;
							}
							text{
								margin-left: 40rpx;
								color: #438EF7;
							}
						}
						.input{
							width: 710rpx;
							position: relative;
							.uploadImgTip{
									position: absolute;
									top: 5%;
									right: 2%;
									width: 372rpx;
									font-size: 24rpx;
									line-height: 30rpx;
									color: #909090;
							}
						}
						
					}
				}
			}
			
			.popupTitle{
				display: flex;
				justify-content: center;
				height: 100rpx;
				align-items: center;
				position: relative;
				color: #333333;
				font-size: 32rpx;
				font-weight: 600;
				border-bottom: 1px solid #ebebeb;
				.icon{
					position: absolute;
					right: 5%;
					
				}
			}
			.btns{
				display: flex;
				justify-content: space-between;
				width: 100%;
				padding: 0rpx 30rpx;
				margin: 40rpx 0 30rpx;
				position: relative;
				.cancle{
					height: 84rpx;
					width: 47%;
					background-color: #fff;
					border: 1px solid #D9D9D8;
					display: grid;
					color: #595959;
					place-items: center;
					border-radius: 8rpx;
				}
				.submit{
					height: 84rpx;
					width: 47%;
					display: grid;
					place-items: center;
					color: #fff;
					background-color: #2772FE;
					border-radius: 8rpx;
				}
			}
		}
		
		
	}

	.radarFormContent{
		height: 900rpx;
	
		.serch{
			margin: 30rpx;
		}
		.radarTypeArr{
			margin: 0rpx 10rpx 30rpx;
			text{
				padding: 0 20rpx;
				// border-left: 1px solid #E8E8E8;
				color: #8A8989;
				font-size: 28rpx;
				position: relative;
				&:before{
					content: '';
					position: absolute;
					left: 0;
					top: 15%;
					width: 4rpx;
					height: 30rpx;
					background-color: #E8E8E8;
				}
				&:nth-child(1){
					&:before{
						content: '';
						width: 0rpx;
						height: 0rpx;
					}
					font-weight: 600;
					border-left: 0px;
					font-size: 33rpx;
					color: #2C2C2C;
				}
			}
		}
		.content{
			height: 570rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.noMore{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				image{
					width: 400rpx;
					height: 250rpx;
				}
				text{
					margin-top: 20rpx;
					margin-left: -40rpx;
				}
			}
		}
		.btns{
			display: flex;
			justify-content: flex-end;
			margin-right: 50rpx;
			font-size: 26rpx;
			.cancle{
				width: 120rpx;
				height: 60rpx;
				background-color: #fff;
				color: #595959;
				border: 2rpx solid #D9D9D9;
				display:grid;
				place-items: center;
				margin-right: 20rpx;
				border-radius: 6rpx;
			}
			.confirm{
				border-radius: 6rpx;
				margin-right: 20rpx;
				display:grid;
				place-items: center;
				height: 60rpx;
				width: 120rpx;
				color: #fff;
				background-color: #438EF7;
			}
		}
	}
</style>